<template>
    <el-dialog v-dialogDrag v-if="popenevTVisible" title="" :close-on-click-modal="false" :before-close="handleCancel" :visible.sync="popenevTVisible" width="1200px">
        <!-- tabs -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="汇总年度考核" name="2"></el-tab-pane>
            <el-tab-pane label="科研年度考核" name="0"></el-tab-pane>
            <el-tab-pane label="决策咨询年度考核" name="1"></el-tab-pane>
        </el-tabs>
        <!-- 搜索 -->
        <div class="HCFormFied field-box" style="display:flex;">
            <div class="field-item" style="margin-right: 15px;">
                <el-cascader placeholder="部门" ref="cascaderRef" v-model="orgName" :props="{ checkStrictly: true, emitPath: false, expandTrigger: 'hover' }" popper-class="popper" @change="onChange($event, 'org')" @blur="offBlur" :show-all-levels="false" @clear="handleClear" filterable clearable :options="optionList"></el-cascader>
            </div>
            <div class="field-item" style="margin-right: 15px;">
                <el-input placeholder="人员" v-model="sqr" @change="onChange($event, 'per')" @blur="offBlur" @clear="handleClear" clearable></el-input>
            </div>
            <div class="field-item flex">
                <el-date-picker
                    v-model="yearArr"
                    type="daterange"
                    range-separator="至"
                    :unlink-panels="true"
                    value-format="yyyy-MM-dd"
                    @change="handleDaterange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <div class="field-item flex" style="margin-left: 15px;" v-if="activeName == '2'">
                <el-select style="width: 150px;" v-model="isHg" placeholder="请选择" @change="onChangeHg">
                    <el-option
                        v-for="item in hgList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </div>
        </div>
        <!-- 排行 -->
        <div class="legend" v-if="activeName == '2'">
            <div class="legend-item">
                <div class="box"></div>
                <div>科研年度考核</div>
            </div>
            <div class="legend-item">
                <div class="box"></div>
                <div>决策咨询年度考核</div>
            </div>
        </div>
        <el-row :gutter="20" style="padding: 10px 20px 20px" v-loading="loading">
            <el-col :span="12">
                <el-scrollbar class="scorll-Y" style="border-right: 5px solid #eee;">
                    <el-row :gutter="20" >
                        <el-col :span="7">
                            <div class="label" v-for="(item, index) in descRankObj.label" :key="index">
                                <span class="label-department">{{item.department}}</span>
                                <span class="label-name" :title="item.name">{{item.name}}</span>
                                <span class="label-hgf">{{ item.hgf }}</span>
                            </div>
                        </el-col>
                        <el-col :span="17" style="padding-left: 0px;">
                            <div class="progress-wrap" v-for="(item, index) in descRankObj.value" :key="index">
                                <div class="progress" :style="{width: (item == null ? 0 : item) + 'px'}" v-if="activeName == '2'">
                                    <div class="ky-progress" :style="{width: (descRankObj.label[index].ky == null ? 0 : ((descRankObj.label[index].ky / item) * 100).toFixed(0)) + '%'}">
                                        <span v-if="descRankObj.label[index].ky > 0">{{ descRankObj.label[index].ky }}</span>
                                    </div>
                                    <div class="jczx-progress" :style="{width: (descRankObj.label[index].jczx == null ? 0 : ((descRankObj.label[index].jczx / item) * 100).toFixed(0)) + '%', left: (descRankObj.label[index].ky == null ? 0 : ((descRankObj.label[index].ky / item) * 100).toFixed(0)) + '%'}">
                                        <span v-if="descRankObj.label[index].jczx > 0">{{ descRankObj.label[index].jczx }}</span>
                                    </div>
                                </div>
                                <div v-else class="progress" :style="{width: getWidth(item, descRankObj.value)}"></div>
                                <span style="margin-left: 10px;display: inline-block;white-space: nowrap;">{{item == null ? 0 : item}}</span>
                            </div>
                        </el-col>
                    </el-row>
                </el-scrollbar>
            </el-col>
            <el-col :span="12">
                <el-scrollbar class="scorll-Y">
                    <el-row :gutter="20" >
                        <el-col :span="7">
                            <div class="label" v-for="(item, index) in orderRankObj.label" :key="index">
                                <span class="label-department">{{item.department}}</span>
                                <span class="label-name" :title="item.name">{{item.name}}</span>
                                <span class="label-hgf">{{ item.hgf }}</span>
                            </div>
                        </el-col>
                        <el-col :span="17" style="padding-left: 0px;">
                            <div class="progress-wrap" v-for="(item, index) in orderRankObj.value" :key="index">
                                <div class="progress" :style="{width: (item == null ? 0 : item) + 'px'}" v-if="activeName == '2'">
                                    <div class="ky-progress" :style="{width: (orderRankObj.label[index].ky == null ? 0 : ((orderRankObj.label[index].ky / item) * 100).toFixed(0)) + '%'}">
                                        <span v-if="orderRankObj.label[index].ky > 0">{{ orderRankObj.label[index].ky }}</span>
                                    </div>
                                    <div class="jczx-progress" :style="{width: (orderRankObj.label[index].jczx == null ? 0 : ((orderRankObj.label[index].jczx / item) * 100).toFixed(0)) + '%', left: (orderRankObj.label[index].ky == null ? 0 : ((orderRankObj.label[index].ky / item) * 100).toFixed(0)) + '%'}">
                                        <span v-if="orderRankObj.label[index].jczx > 0">{{ orderRankObj.label[index].jczx }}</span>
                                    </div>
                                </div>
                                <div v-else class="progress" :style="{width: getWidth(item, orderRankObj.value)}"></div>
                                <span style="margin-left: 10px;display: inline-block;white-space: nowrap;">{{item == null ? 0 : item}}</span>
                            </div>
                        </el-col>
                    </el-row>
                </el-scrollbar>
            </el-col>
        </el-row>
    </el-dialog>
</template>

<script setup>
import { ref, onMounted, watch, nextTick } from 'vue';
import { getOrgList, getYearKycg } from '../../api/commonApi.js';
import moment from 'moment';

// 响应式数据
const popenevTVisible = ref(false);
const orgName = ref('');
const sqr = ref('');
const nd = ref("");
const jsnd = ref("");
const optionList = ref([]);
const orderRankObj = ref({});
const descRankObj = ref({});
const totalNum = ref(0);
const yearList = ref([]);
const activeName = ref("2");
const yearArr = ref([]);
const isHg = ref('');
const hgList = ref([
    {value: '', label: '全部'},
    {value: '0', label: '合格'},
    {value: '1', label: '不合格'}
]);
const loading = ref(false);
const cascaderRef = ref(null);
let promiseStatus = { resolve: null, reject: null };

// 方法
const show = (data, config) => {
    popenevTVisible.value = true;
    const yearStart = moment(moment().startOf('year')).format('YYYY-MM-DD');
    const yearEnd = moment(moment().endOf('year')).format('YYYY-MM-DD');
    yearArr.value = [yearStart, yearEnd];
    nd.value = yearStart;
    jsnd.value = yearEnd;
    getOrgList();
    getRankList();
    
    // 创建promise
    return new Promise((resolve, reject) => {
        promiseStatus = {
            resolve,
            reject
        };
    });
};

const getWidth = (P_Item, P_List) => {
    if (P_Item == null) return 0;
    const maxNum = Math.max.apply(null, P_List);
    const num = ((P_Item / maxNum) * 100).toFixed(0) + '%';
    return num;
};

const handleClick = (tab, event) => {
    getRankList();
};

const handleDaterange = (value) => {
    if (value && value.length > 0) {
        nd.value = value[0];
        jsnd.value = value[1];
    } else {
        nd.value = '';
        jsnd.value = '';
    }
    getRankList();
};

const yearChange = () => {
    const myDate = new Date();
    const startYear = myDate.getFullYear() - 10; // 起始年份
    const endYear = myDate.getFullYear() + 20; // 结束年份

    yearList.value = [];
    for (let i = startYear; i <= endYear; i++) {
        yearList.value.push({value: (i), label: (i)});
    }
};

const getOrgList = () => {
    getOrgList().then(res => {
        if (res.code == 200) {
            optionList.value = JSON.parse(res.message) || [];
        }
    });
};

const onChange = (e, type) => {
    if (type == 'org') {
        orgName.value = e;
        if (e) {
            nextTick(() => {
                cascaderRef.value?.toggleDropDownVisible();
            });
        }
    } else if (type == 'per') {
        sqr.value = e;
    }
    getRankList();
};

const onChangeHg = (P_Event) => {
    getRankList();
};

const offBlur = (e) => {
    orgName.value = '';
    sqr.value = '';
    nd.value = '';
    jsnd.value = '';
};

const handleClear = () => {
    orgName.value = '';
    sqr.value = '';
    nd.value = '';
    jsnd.value = '';
    getRankList();
};

const getRankList = () => {
    descRankObj.value = {};
    orderRankObj.value = {};
    const param = {
        ngbm: orgName.value,
        sqr: sqr.value,
        nd: yearArr.value.length > 0 ? yearArr.value[0] : '',
        jsnd: yearArr.value.length > 0 ? yearArr.value[1] : '',
        cgbm: activeName.value == '2' ? '' : activeName.value,
        hgf: isHg.value
    };
    loading.value = true;
    getYearKycg(param).then(res => {
        loading.value = false;
        if (res.code == 200) {
            const order = res.result.order;
            const desc = res.result.desc;
            const orderObj = {};
            const descObj = {};
            orderObj.label = order['部门'];
            orderObj.value = order['四报'];
            descObj.label = desc['部门'];
            descObj.value = desc['四报'];
            let totalNumValue = 0;
            orderObj.value.map(item => {
                if (item == null) {
                    totalNumValue += 0;
                } else {
                    totalNumValue += item;
                }
            });
            orderRankObj.value = orderObj;
            descRankObj.value = descObj;
            totalNum.value = totalNumValue;
        }
    });
};

const getFormatter = (P_Value) => {
    const num = ((Number(P_Value) / Number(totalNum.value)) * 100).toFixed(0);
    return Number(num);
};

const handleCancel = () => {
    popenevTVisible.value = false;
    promiseStatus.reject({
        msg: "取消"
    });
};

// 生命周期钩子
onMounted(() => {
    yearChange();
});

// 导出方法和数据
defineExpose({
    show
});
</script>

<style lang="scss" scoped>
.scorll-Y {
    height: 500px;
    margin-top: 10px;
    ::v-deep .el-scrollbar__wrap {
        overflow-x: hidden;
    }
    ::v-deep .el-scrollbar__bar.is-vertical {
        width: 15px;
    }
    ::v-deep .el-scrollbar__bar.is-horizontal {
        height: 0px;
    }
}
.label {
    height: 23px;
    line-height: 23px;
    margin-bottom: 4px;
    display: flex;
}
.value {
    margin-bottom: 4px !important;
    ::v-deep .el-progress-bar__outer, ::v-deep .el-progress-bar__inner {
        border-radius: 10px;
    }
    ::v-deep .el-progress-bar__outer {
        background: #fff !important;
    }
}
.progress-wrap {
    display: flex;
    align-items: center;
    height: 23px;
    margin-bottom: 4px;
    cursor: pointer;
    .progress {
        max-width: 400px;
        background: linear-gradient(to right, #021bbe, #03aac1);
        // border-radius: 5px;
        height: 100%;
        position: relative;
    }
    .ky-progress {
        position: absolute;
        left: 0;
        top: 0;
        background: #ffda43;
        // border-radius: 5px;
        height: 100%;
        z-index: 10;
        // display: none;
        font-size: 13px;
        line-height: 24px;
        text-align: center;
    }
    .jczx-progress {
        position: absolute;
        top: 0;
        background: #1b5fa4;
        // border-radius: 5px;
        height: 100%;
        z-index: 10;
        // display: none;
        font-size: 13px;
        text-align: center;
        line-height: 24px;
        color: #fff;
    }
}
.progress-wrap:hover {
    .ky-progress, .jczx-progress {
        display: block;
    }
}
.label-department {
    display: inline-block;
    margin-right: 10px;
    text-align: justify;
    text-align-last: justify;
    width: 45px;
}
.label-name {
    display: inline-block;
    width: 56px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.label-hgf {
    display: inline-block;
    width: 20px;
    margin-left: 10px;
}
.flex {
    display: flex;
    align-items: center;
}

.legend {
    display: flex;
    align-items: center;
    margin: 5px 0;
    .legend-item {
        display: flex;
        align-items: center;
        margin-right: 20px;
        font-size: 16px;
        color: #333;
        .box {
            width: 30px;
            height: 20px;
            border-radius: 5px;
            background: #ffda43;
            margin-right: 10px;
        }
    }
    .legend-item:last-child .box {
        background: #1b5fa4;
        margin-right: 10px;
    }
}
</style>